<template>
  <div class="device-state" :style="miniHeight">
    <div class="popup-box">
      <div class="popup-switch"><span class="iconfont icon-line" @click="minimize"></span><span class="iconfont icon-border" @click="maximization"></span></div>
      <div class="popup-top"></div>
      <div class="popup-top-info">
        <span class="title">小区设备状态</span>
        <div class="top-total"><em class="color1"></em><span>968</span><em class="color2"></em><span>4</span><em class="color3"></em><span>8</span>
        </div>
      </div>
      <!--<div class="popup-top-line" v-show="lineState"></div>-->
      <div v-show="boxState">
        <div class="popup-lay">
          <div class="popup-lay-wrap">
            <div class="popup-center">
              <div class="device-table">
                <table>
                  <colgroup style="margin-bottom:10px">
                    <col style="width: 8%;"/>
                    <col style="width: 20%;"/>
                    <col style="width: 12%;"/>
                    <col style="width: 12%;"/>
                    <col style="width: 12%;"/>
                    <col style="width: 12%;"/>
                    <col style="width: 12%;"/>
                    <col style="width: 12%;"/>
                  </colgroup>
                  <tr>
                    <th><em class="icon"></em></th>
                    <th class="TL">类型</th>
                    <th>开关</th>
                    <th>总数</th>
                    <th>在线</th>
                    <th>失联</th>
                    <th>空位</th>
                    <th>占位</th>
                  </tr>
                </table>
                <div class="H8"></div>
                <table>
                  <colgroup>
                    <col style="width: 8%;"/>
                    <col style="width: 20%;"/>
                    <col style="width: 12%;"/>
                    <col style="width: 12%;"/>
                    <col style="width: 12%;"/>
                    <col style="width: 12%;"/>
                    <col style="width: 12%;"/>
                    <col style="width: 12%;"/>
                  </colgroup>

                  <tr class="tr" v-for="(item,index) in deviceData" :key="index">
                    <td><img :src="item.deviceSrc" alt=""></td>
                    <td class="TL"><span class="white">{{item.deviceName}}</span></td>
                    <td>
                      <el-switch :width="30" v-model="item.deviceState" @click.native="switchFun(item)"></el-switch>
                    </td>
                    <td><span>{{item.deviceCount}}</span></td>
                    <td><span>{{item.deviceOnLine}}</span></td>
                    <td><span>{{item.deviceOutContact}}</span></td>
                    <td><span>{{item.deviceVacancy}}</span></td>
                    <td><span :class='item.deviceSeizeSeatState == true ? "orange" : ""'>{{item.deviceSeizeSeat}}</span></td>
                  </tr>
                </table>
                <div class="H5"></div>
                <table>
                  <colgroup>
                    <col style="width: 8%;"/>
                    <col style="width: 20%;"/>
                    <col style="width: 12%;"/>
                    <col style="width: 12%;"/>
                    <col style="width: 12%;"/>
                    <col style="width: 12%;"/>
                    <col style="width: 12%;"/>
                    <col style="width: 12%;"/>
                  </colgroup>
                  <tr>
                    <th><em class="icon"></em></th>
                    <th class="TL">类型</th>
                    <th>开关</th>
                    <th>总数</th>
                    <th>在线</th>
                    <th>失联</th>
                    <th>故障</th>
                    <th>报警</th>
                  </tr>
                </table>
                <div class="H5"></div>
                <table>
                  <colgroup>
                    <col style="width: 8%;"/>
                    <col style="width: 20%;"/>
                    <col style="width: 12%;"/>
                    <col style="width: 12%;"/>
                    <col style="width: 12%;"/>
                    <col style="width: 12%;"/>
                    <col style="width: 12%;"/>
                    <col style="width: 12%;"/>
                  </colgroup>
                  <tr class="tr" v-for="(item,index) in deviceData2" :key="index">
                    <td><img :src="item.deviceSrc" alt=""></td>
                    <td class="TL"><span class="white">{{item.deviceName}}</span></td>
                    <td>
                      <el-switch :width="30" v-model="item.deviceState" @click.native="switchFun(item)"></el-switch>
                    </td>
                    <td><span>{{item.deviceCount}}</span></td>
                    <td><span>{{item.deviceOnLine}}</span></td>
                    <td><span>{{item.deviceOutContact}}</span></td>
                    <td><span :class='item.deviceFaultState == true ? "yellow" : ""'>{{item.deviceFault}}</span></td>
                    <td><span :class='item.deviceBaoJingState == true ? "orange" : ""'>{{item.deviceBaoJing}}</span></td>
                  </tr>
                </table>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      miniHeight: 'auto', // 右侧框高度
      boxState: true,
      deviceData: [
        {
          deviceSrc: '/images/map/map003.png',
          deviceName: '智能停车',
          deviceState: true,
          deviceCount: 234,
          deviceOnLine: 230,
          deviceOutContact: 4,
          deviceVacancy: 118,
          deviceSeizeSeat: 112,
          deviceSeizeSeatState: true
        },
        // {
        //   deviceSrc: "../../../static/images/map/map004.png",
        //   deviceName: "智能违停",
        //   deviceState: true,
        //   deviceCount: 67,
        //   deviceOnLine: 66,
        //   deviceOutContact: 1,
        //   deviceVacancy: 62,
        //   deviceSeizeSeat: 4,
        //   deviceSeizeSeatState: true
        // },
        {
          deviceSrc: '/images/map/map005.png',
          deviceName: '非机动车',
          deviceState: true,
          deviceCount: 310,
          deviceOnLine: 310,
          deviceOutContact: 0,
          deviceVacancy: 167,
          deviceSeizeSeat: 143,
          deviceSeizeSeatState: true
        }
      ],
      deviceData2: [
        {
          deviceSrc: '/images/map/map006.png',
          deviceName: '烟感报警',
          deviceState: true,
          deviceCount: 320,
          deviceOnLine: 320,
          deviceOutContact: 0,
          deviceFault: 0,
          deviceFaultState: true,
          deviceBaoJing: 1,
          deviceBaoJingState: true
        },
        {
          deviceSrc: '/images/map/map007.png',
          deviceName: '智能井盖',
          deviceState: true,
          deviceCount: 32,
          deviceOnLine: 32,
          deviceOutContact: 0,
          deviceFault: 0,
          deviceFaultState: true,
          deviceBaoJing: 0,
          deviceBaoJingState: true
        },
        {
          deviceSrc: '/images/map/map008.png',
          deviceName: '消防栓',
          deviceState: true,
          deviceCount: 15,
          deviceOnLine: 15,
          deviceOutContact: 0,
          deviceFault: 1,
          deviceFaultState: true,
          deviceBaoJing: 0,
          deviceBaoJingState: true
        },
        {
          deviceSrc: '/images/map/map009.png',
          deviceName: '电梯',
          deviceState: true,
          deviceCount: 24,
          deviceOnLine: 24,
          deviceOutContact: 0,
          deviceFault: 0,
          deviceFaultState: true,
          deviceBaoJing: 0,
          deviceBaoJingState: true
        }
      ],
      deviceStateList: []
    }
  },
  components: {},
  mounted () {
  },
  methods: {
    switchFun (item) {
      let data = this.deviceData2
      this.deviceStateList = []
      for (let i = 0; i < data.length; i++) {
        let itm = {
          deviceName: data[i].deviceName,
          deviceState: data[i].deviceState
        }
        this.deviceStateList.push(itm)
      }
      this.$store.dispatch('addevent', this.deviceStateList)
      this.$store.dispatch('stateevent', item)
    },
    minimize () {
      this.miniHeight = 'height: 75px'
    },
    maximization () {
      this.miniHeight = 'height: auto'
    }
  }
}
</script>
<style lang="less" scoped>
  .device-state {
    width: 460px;
    background-color: rgba(43, 54, 72, 0.95);
    border-radius: 10px;
    margin-top: 10px;
    overflow: hidden;
    .popup-switch {
      margin-top: 5px;
      text-align: right;
      height: 28px;
      line-height: 28px;
    }
    .iconfont {
      display: inline-block;
      margin-right: 10px;
      color: #50e3c2;
      cursor: pointer;
    }
    .popup-box {
      position: relative;
      height: 100%;
      .minimize-btn,
      .maximization-btn {
        display: block;
        top: 8px;
        width: 14px;
        height: 14px;
        cursor: pointer;
        position: absolute;
        z-index: 1001;
      }
      .minimize-btn {
        right: 36px;
        background: url(/images/map/minimize.png) no-repeat center center;
        background-size: 100%;
      }
      .maximization-btn {
        right: 16px;
        background: url(/images/map/maximization.png) no-repeat center center;
        background-size: 100%;
      }
    }
  }

  .popup-top-info {
    top: 14px !important;
    width: 400px;
    height: 51px;
    padding: 0 30px;
    /*background-color: rgba(43, 54, 72, 0.95);*/
    .title {
      float: left;
      line-height: 51px;
      color: #50e3c2;
      font-size: 16px;
    }
    .top-total {
      float: right;
      letter-spacing: -5px;
      font-size: 0;
      line-height: 24px;
      margin-top: 15px;
      em,
      span {
        display: inline-block;
        vertical-align: top;
        letter-spacing: normal;
        font-size: 14px;
        color: #fff;
      }
      em {
        width: 9px;
        height: 9px;
        border-radius: 2px;
        margin-top: 7px;
        margin-left: 9px;
        &.color1 {
          background: #50e3c2;
        }
        &.color2 {
          background: #ffb400;
        }
        &.color3 {
          background: #f6511d;
        }
      }
      span {
        margin-left: 14px;
      }
    }
  }

  .popup-top-line {
    border-top: 1px solid rgba(80, 227, 194, 0.5);
    height: 1px;
    position: absolute;
    top: 65px;
    left: 0;
    width: 459px;
  }

  .popup-lay {
    top: 65px !important;
    bottom: 14px;
    width: 460px;
    z-index: 100;
    overflow: hidden;
  }

  .popup-lay-wrap {
    width: 480px;
    height: 100%;
    overflow-y: scroll;
  }

  .popup-line {
    top: 65px !important;
    bottom: 14px;
    width: 460px;
    z-index: 100;
    /*background-color: rgba(43, 54, 72, 0.95);*/
  }

  .popup-center {
    width: 460px;
  }

  .device-table {
    padding: 10px;
    padding-top: 0;
    table {
      width: 100%;
      th {
        background: rgba(0, 0, 0, .2);
        height: 30px;
        line-height: 30px;
        color: #4a90e2;
        font-size: 12px;
        letter-spacing: 0.29px;
        &.TL {
          text-align: left;
          text-indent: 3px;
        }
        em.icon {
          background: #50e3c2;
          width: 10px;
          height: 10px;
          display: inline-block;
        }
      }
      tr.tr {
        border-bottom: 1px solid rgba(80, 227, 194, 0.3);
      }
      td {
        height: 40px;
        line-height: 40px;
        text-align: center;
        font-size: 14px;
        &.TL {
          text-align: left;
          text-indent: 3px;
        }
        span {
          color: #50e3c2;
          &.white {
            color: #fff;
          }
          &.orange {
            color: #ff440a;
          }
          &.yellow {
            color: #f5a623;
          }
        }
        img {
          vertical-align: middle;
          width: 14px;
          height: 14px;
        }
      }
    }
  }

  .alarm-trend {
    width: 410px;
    height: 97px;
    margin: 0 auto;
  }

  .H5 {
    height: 5px;
  }

  .H8 {
    height: 8px;
  }

  .device-title {
    height: 30px;
    line-height: 30px;
    padding: 0 30px;
    margin-top: 14px;
    margin-bottom: 15px;
    .title {
      float: left;
      line-height: 30px;
      color: #50e3c2;
      font-size: 16px;
    }
    .bottom-total {
      float: right;
      color: #50e3c2;
      letter-spacing: -5px;
      font-size: 0;
      line-height: 24px;
      em,
      span {
        display: inline-block;
        vertical-align: top;
        letter-spacing: normal;
        font-size: 14px;
      }
      em {
        font-style: normal;
        color: #50e3c2;
      }
      span {
        font-size: 24px;
        color: #f5a623;
        margin-left: 4px;
      }
    }
  }

  /** element ui rewrite **/
  .el-switch {
    height: 16px;
    line-height: 16px;
  }

  .el-switch /deep/ .el-switch__core {
    background-color: rgba(0, 0, 0, .4);
    border: 1px solid #B9C7C4;
    height: 16px;
  }

  .el-switch /deep/ .el-switch__core::after {
    background-color: #B9C7C4;
    width: 12px;
    height: 12px;
  }

  .el-switch.is-checked /deep/ .el-switch__core {
    background-color: rgba(0, 0, 0, .4);
    border: 1px solid #50E3C2;
  }

  .el-switch.is-checked /deep/ .el-switch__core::after {
    background-color: #50E3C2;
    margin-left: -13px;
  }

</style>
